<template>
  <div class="index-container">
    <el-row :gutter="10">
      <el-col :span="5">
        <div class="grid-card" :style="'height:'+treeHeight+'px;margin-top:0px'">
          <RayTree ref="tree" :menu="menu" edit_name="修改部门名称" add_name="新增子部门" @nodeClick="departmentClick" @checked="departmentChecked"></RayTree>
        </div>
      </el-col>
      <el-col :span="19">
        <RayTable ref="table" :menu="menu" :data_object_no="menu.son_data_object_no" :height="tableHeight"
          :precondition="precondition" :auto_load="false" :other_data="{checkNode:checkedDp,selectNode:selectDepartment}">
          <template #line_btn_prepend="{row}">
            <el-button type="success" @click="role(row)" round>分配角色</el-button>
          </template>
        </RayTable>
      </el-col>
    </el-row>
    <UserRole ref="userRole"></UserRole>
  </div>
</template>

<script>
  import RayTable from '@/views/template/components/rayTable.vue'
  import RayTree from '@/views/template/components/rayTree.vue'
  import UserRole from '@/views/template/components/userRole.vue'
  export default {
    name: 'Single',
    components: {
      RayTable,
      RayTree,
      UserRole
    },
    data() {
      return {
        precondition: {},
        selectDepartment:{},
        checkedDp:{}
      }
    },
    created() {
      this.menu = this.$route.meta.query
      this.tableHeight = document.documentElement.clientHeight - 250
      this.treeHeight = document.documentElement.clientHeight - 250
    },
    methods: {
      departmentClick(row){
        this.selectDepartment = row
        this.precondition[this.menu.son_id_field] = '%' + row[this.menu.parent_id_field] + '%'
        this.$refs.table.getData()
      },
      departmentChecked(dp){
        this.checkedDp = dp
      },
      role(row){
        this.$refs.userRole.show({userid:row.userid})
      }
    }
  }
</script>
